<template>
  <el-progress :percentage="p" />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const props = defineProps({
  //进度条数值
  percentage: {
    type: Number,
    default: 0,
    required: true,
  },
  //是否有动画效果
  isAnimation: {
    type: Boolean,
    default: false,
  },
  // 动画时长
  animationTime: {
    type: Number,
    default: 300,
  },
});
let p = ref<number>(0);
onMounted(() => {
  //间隔多久数值加1
  let timer = Math.ceil(props.animationTime / props.percentage);
  let t = setInterval(() => {
    if (p.value >= props.percentage) {
      p.value = props.percentage;
      clearInterval(t);
    } else {
      p.value += 1;
    }
  }, timer);
});
</script>

<style scoped></style>
